<!--
 * @Author: Bennty
 * @Date: 2024-07-25 14:14:29
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-07-25 17:22:02
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" title="申请历史" @close="handleClose" destory-on-close>
        <el-form>
            <el-form-item label="客户名称">
                <span>{{ props.data.customerName }}</span>
            </el-form-item>
            <el-form-item label="客户星级">
                <span class="level-one" v-if="props.data.level == 1">一级客户</span>
                <span class="level-two" v-else-if="props.data.level == 2">二级客户</span>
                <span class="level-three" v-else-if="props.data.level == 3">三级客户</span>
                <span class="level-four" v-else-if="props.data.level == 4">四级客户</span>
                <span class="level-five" v-else-if="props.data.level == 5">五级客户</span>
            </el-form-item>
        </el-form>
        <el-table :data="recordList" height="300">
            <el-table-column label="申请日期" prop="applyDate"></el-table-column>
            <el-table-column label="申请人" prop="applyPersonName"></el-table-column>
            <el-table-column label="申请产品" prop="welfareName"></el-table-column>
            <el-table-column label="审批状态" >
                <template #default="scope">
                    <span class="unexamine" v-if="scope.row.approvalStatus == '1'">未审批</span>
                    <span class="approved" v-else-if="scope.row.approvalStatus == '2'">已通过</span>
                    <span class="rejected" v-else>已拒绝</span>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button  @click="handleClose">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {ref} from 'vue';

const props = defineProps(['visible','data','record']);
const emits = defineEmits(['close']);
const recordList = ref<any[]>([]);

watch(()=>props.record,(newData)=>{
    recordList.value = newData;
},{deep:true});

const handleClose = ()=>{
    emits('close');
};
</script>

<style lang="scss" scoped>
.level-one,.level-two {
    color:yellowgreen
}
.level-three,.level-four{
    color: orange;
}
.level-five{
    color: red
}
.dialog-footer{
    display: flex;
    justify-content: center;
}
.unexamine{
    color: orange;
}
.approved{
    color: yellowgreen
}
.rejected{
    color:red;
}
</style>